<template>
  <div>
    <editor
      :api-key="apiKey"
      :init="editorOption"
      >
    </editor>
  </div>
</template>
<script>
import Editor from '@tinymce/tinymce-vue';

export default {
  name: 'Editor',
  data () {
    return {
      apiKey: 'limppvsecd2utcimllsoqjuseqw643knnjj8xr82nclfqa1e',
      editorOption: {
        height: 700,
        menubar: false,
        branding: false,
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table paste code help wordcount'
        ],
        toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent  | undo redo | link unlink image  | removeformat ',
        images_upload_handler (blobInfo, success, failure) {
          console.log('图片', blobInfo)
        }
      },
    //   editorOption: {
    //    modules:{
    //      toolbar: [
    //          ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
    //          ['blockquote', 'code-block'], //引用，代码块
    //          [{'header': 1}, {'header': 2}], // 标题，键值对的形式；1、2表示字体大小
    //          [{'list': 'ordered'}, {'list': 'bullet'}], //列表
    //          [{'script': 'sub'}, {'script': 'super'}], // 上下标
    //          [{'indent': '-1'}, {'indent': '+1'}], // 缩进
    //          [{'direction': 'rtl'}], // 文本方向
    //          [{'size': ['small', false, 'large', 'huge']}], // 字体大小
    //          [{'header': [1, 2, 3, 4, 5, 6, false]}], //几级标题
    //          [{'color': []}, {'background': []}], // 字体颜色，字体背景颜色
    //          [{'font': []}], //字体
    //          [{'align': []}], //对齐方式
    //          ['clean'], //清除字体样式
    //          ['image', 'video'] //上传图片、上传视频
    //         ]
    //      },
    //      placeholder: "输入内容..."
    //  }, //编辑器配置项
    }
  },
  components: {
    Editor
  }
}
</script>
<style lang="scss">

</style>
